<template>
  <p>App</p>
  <p>{{ counter.count }}</p>
  <button @click="updateCount">按钮</button>
</template>

<script lang="ts">
import {
  ref,
  reactive,
  readonly,
  shallowRef,
  shallowReactive,
  shallowReadonly,
} from "vue";

/*
  ref
  reactive
  readonly

  浅层：只会将第一层变成响应式
    shallowRef 只有 .value 访问才是响应式，其他不是
    shallowReactive 只有第一层属性才是响应式，其他不是
    shallowReadonly 只有第一层属性是只读的，其他不是
*/

export default {
  name: "App",
  // 组合式API入口，所有组合式API的内容都必须写在这个函数中
  // setup初始化渲染就会触发，相当于（取缔） beforeCreate 和 created
  setup() {
    // const counter = readonly({ count: 0, person: { name: "jack" } });

    // const updateCount = () => {
    //   // counter.count++; // 报错
    //   // counter.person.name = "rose"; // 报错
    // };

    // const counter = ref({ count: 0 });
    const counter = shallowRef({ count: 0 });

    const updateCount = () => {
      // counter.value.count++; // 不是响应式
      counter.value = { count: counter.value.count + 1 }; // 是响应式
    };

    return {
      updateCount,
      counter,
    };
  },
};
</script>
